<template>
	<!-- 这是消息页，物流等 -->
	<!-- 中间消息swiper高度，自适应问题没有解决 -->
	<view class="page">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header">
			<view class="headerLeft">
				<image class="backImg" src="../../static/icons/lx/icon_statusbar_back2x.png" mode="" @tap="back">
				</image>
				<text class="headerText">消息</text>
			</view>
			<view class="headerRight">
				<image class="clearImg" @tap="clearMessage(currentTab)"
					src="../../static/icons/lx/icon_message_clear3x.png" mode=""></image>
			</view>
		</view>
		<view class="navList">
			<view class="nav" v-for="(item, index) in tablist" :key="item" @click="clickChange(index)">
				<text :class="{active: index==currentTab}">{{item}}</text>
			</view>
		</view>
		<view class="swiper" :current="currentTab">
			<view class="swiper-item">
				<view class="eachMessage" :class="{isReadStyle: item.isread}" v-for="(item,index) in showArr"
					:key="item.message_id">
					<scroll-view scroll-x="true">
						<view class="eachScroll">
							<view class="messageArea" @tap="changeRead(item)">
								<view class="nameDiv">
									<view class="signDiv">
										<text class="sign" v-if="!item.isread">●</text>
									</view>
									<text class="nameText">{{item.name}}</text>
								</view>
								<view class="messageDiv">
									<text class="messageText">{{item.message}}</text>
								</view>
								<view class="timeDiv">
									<text class="timeText">{{item.message_time}}</text>
								</view>
							</view>
							<view class="toTopMsg" @tap="toTop(index)"><text class="operatText">置顶</text></view>
							<view class="deleteMsg" @tap=""><text class="operatText">删除</text></view>
						</view>
					</scroll-view>
				</view>
				<view class="arrNullMsg" v-if="false">
					<text class="arrNullText">下拉进行加载</text>
					<image class="arrNullImg" src="../../static/images/lx/Image_messageNull2x.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="footerBar">
			<navigator class="footItem" url=""><text class="footText">进入车友圈</text></navigator>
			<navigator class="footItem" url=""><text class="footText">进入商城</text></navigator>
			<navigator class="footItem" url=""><text class="footText">个人中心</text></navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: ['物流', '互动', '系统'],
				currentTab: 0,
				// 每个商品有个状态已阅读
				Arr: [
					[{
							"message_id": "1",
							"name": "四海汽车配件商场",
							"message": "你好，您在2021年6月25日购买的保养配件已发货，请留意养护店家的信息，以确保货物及时到达",
							"message_time": '2021-03-30',
							"isread": false
						},
						{
							"message_id": "2",
							"name": "四海汽车配件商场2",
							"message": "你好，您在2021年6月25日购买的保养配件已发货，请留意养护店家的信息，以确保货物及时到达",
							"message_time": '2021-03-30',
							"isread": false,
						},
						{
							"message_id": "3",
							"name": "四海汽车配件商场3",
							"message": "你好，您在2021年6月25日购买的保养配件已发货，请留意养护店家的信息，以确保货物及时到达",
							"message_time": '2021-03-30',
							"isread": false,
						}
					],
					[{		
							"message_id": "1",
							"name": "199****8456",
							"message": "我觉得兄弟汽车生活馆的服务好一点，环境也不错，你可以在那里体验一下。",
							"message_time": '2021-03-30',
							"isread": false
						},
						{
							"message_id": "2",
							"name": "139****8456",
							"message": "我觉得兄弟汽车生活馆的服务好一点，环境也不错，你可以在那里体验一下。",
							"message_time": '2021-03-30',
							"isread": false
						},
						{
							"message_id": "3",
							"name": "149****8456",
							"message": "我觉得兄弟汽车生活馆的服务好一点，环境也不错，你可以在那里体验一下。",
							"message_time": '2021-03-30',
							"isread": false
						}
					],
					[	{
							"message_id": "1",
							"name": "系统消息",
							"message": "1你的会员一到期，会员到期将无法获取相关权益，且优惠券将于下次清零，请及时续费的的会员以此来保证您的更多权益",
							"message_time": '2021-03-30',
							"isread": false
						},
						{
							"message_id": "2",
							"name": "系统消息",
							"message": "2你的会员一到期，会员到期将无法获取相关权益，且优惠券将于下次清零，请及时续费的的会员以此来保证您的更多权益",
							"message_time": '2021-03-30',
							"isread": false
						},
						{
							"message_id": "3",
							"name": "系统消息",
							"message": "3你的会员一到期，会员到期将无法获取相关权益，且优惠券将于下次清零，请及时续费的的会员以此来保证您的更多权益",
							"message_time": '2021-03-30',
							"isread": false
						}
					]

				],
			}
		},
		computed: {

		},
		methods: {
			clickChange(index) {
				this.currentTab = index;
			},
			changeTab(e) {
				this.currentTab = e.detail.current;
			},
			// 返回上一页
			back() {
				uni.navigateBack();
			},
			changeRead(item) {
				item.isread = true;
			},
			// 清空数组，显示消息为空
			clearMessage(current) {
				if (current == 0) {
					this.logisticsMessage = [];
				} else if (current == 1) {
					this.replyMessage = [];
				} else if (current == 2) {
					this.systemMessage = [];
				}
			},
			// 置顶功能
			toTop(index) {
				// console.log(index,item);
				const item = this.showArr[index];
				this.showArr.splice(index, 1);
				this.showArr.unshift(item);
			}
		},
		computed: {
			showArr() {
				return this.Arr[this.currentTab];
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.page {
		height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 2rpx;
		overflow: hidden;
		width: 750rpx;
		height: 88rpx;
		background-color: #ffffff;
		border-bottom: ;
	}

	.headerLeft {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 20rpx;
		width: 390rpx;
		height: 56rpx;
	}

	.backImg {
		height: 56rpx;
		width: 44rpx;
	}

	.headerText {
		height: 56rpx;
		font-family: PingFang SC;
		font-size: 40rpx;
		line-height: 56rpx;
		color: #232323;
	}

	.headerRight {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
	}

	.clearImg {
		margin-right: 38rpx;
		width: 55rpx;
		height: 52rpx;
	}

	.settingImg {
		width: 55rpx;
		height: 52rpx
	}

	.navList {
		display: flex;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #fff;
	}

	.nav {
		flex-grow: 1;
		text-align: center;
	}

	.active {
		border-bottom: 2px solid orange;
	}

	/* 消息区 */
	.swiper-item {
		margin-top: 24rpx;
	}

	.eachMessage {
		width: 100%;
		margin: 20rpx auto;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	/* 消息操作swiper */
	.eachScroll {
		display: flex;
		padding-top: 20rpx;
		width: 140vw;
	}

	.messageArea {
		box-sizing: border-box;
		padding-left: 30rpx;
		width: 100vw;
	}

	.toTopMsg {
		width: 20vw;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		background-color: #636363;
	}

	.deleteMsg {
		width: 20vw;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
		background-color: #ff2424;
	}

	.operatText {
		font-family: PingFang SC;
		font-size: 24rpx;
		color: #fff;
	}

	/* 消息操作end */
	.nameDiv {
		margin-bottom: 8rpx;
	}

	.signDiv {
		display: inline-block;
		width: 36rpx;
		height: 36rpx;
	}

	.sign {
		margin-right: 10rpx;
		font-size: 36rpx;
		color: #f5610c;
	}

	.nameText {
		font-family: PingFang SC;
		font-size: 36rpx;
		line-height: 34rpx;
		color: #4e4e4e;
	}

	.messageDiv {
		margin-bottom: 8rpx;
		margin-left: 40rpx;
		width: 600rpx;
		height: auto;
	}

	.messageText {
		font-family: PingFang SC;
		font-size: 26rpx;
		line-height: 28rpx;
		color: #7c7c7c;
	}

	.timeDiv {
		margin-left: 40rpx;
	}

	.timeText {
		width: 98rpx;
		height: 26rpx;
		font-family: PingFang SC;
		font-size: 24rpx;
		line-height: 26rpx;
		color: #b4b4b4;
	}

	.swiper {
		/* 减去首部的高度和底部高度 */
		height: calc(100vh - 158rpx - 120rpx);
	}

	.scroll {
		height: 100%;
	}

	/* 为空start */
	.arrNullMsg {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.arrNullText {
		font-family: PingFang SC;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #afafaf;
	}

	.arrNullImg {
		margin-top: 272rpx;
		width: 228rpx;
		height: 228rpx;
	}

	/* 为空end */

	/* 已阅读演示 */
	.isReadStyle {
		opacity: 0.7;
	}

	/* 底部跳转 */
	.footerBar {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.footItem {
		width: 268rpx;
		text-align: center;
	}

	.footText {
		font-family: PingFang SC;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #595959;
	}
</style>
